<style scoped>
    .fill-item{height:50px;padding:0 10px;}
    .fill-item input{border:0;height:100%;text-align:right;width:200px;}
    .fill-item .select-box{height:100%;}
    .fill-item select{border:0;height:100%;position:absolute;top:0;right:10px;min-width:200px;opacity: 0;}
    .verify-btn{border:0;padding:5px 8px;border-radius:3px;margin-left:5px;}
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
    .mark{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}
    .verify{position:fixed;width:300px;height:170px;top:50px;left:50%;margin-left:-150px;border-radius:10px;}
    .verify h4{height:50px;line-height:50px;}
    .verify-input{padding:20px}
    .verify-input input{width:150px;border:solid 1px #ccc;}
    .verify-btn-box a{display:block;width:50%;height:50px;line-height:50px;text-align:center;font-size:16px;}
    .icon-camera{color:#3caaff;font-size:.8rem;}
    input.bank{width:285px!important}
</style>
<template>
  <wrap title="填写用户资料">
    <div slot="page">
      <fill-progress :step="1"></fill-progress>
      <div class="fill-box light-bg">
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">持卡人</span>
          <span class="font-15">{{bank.name}}</span>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">身份证号</span>
          <span class="font-15">{{bank.idCard}}</span>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">卡号</span>
          <input class="font-15 bank" v-model="bank.bankNo" @input="splitNumber" type="text" placeholder="请填写银行卡号">
          <input class="hide" type="file" ref="file" @change="upload" accept="image/*" capture="camera">
          <i class="iconfont icon-camera" @click="trigger()"></i>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">发卡银行</span>
          <i-select v-model="bank.bankId" :option="bank.bankList"></i-select>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">预留手机号</span>
          <input class="font-15" type="number" v-model="bank.bankPhone" placeholder="请填写银行卡预留的手机号">
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'blue-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>
      <div class="verify-box" v-if="showVerify">
        <div class="mark"></div>
        <div class="verify light-bg">
          <h4 class="text-center normal border-bottom font-16">请输入尾号{{phoneEnd}}收到的验证码</h4>
          <div class="verify-input flex flex-justify-between">
            <input class="font-15" type="text" v-model="verify" placeholder="填写短信验证码">
            <button :class="['verify-btn',verifyBtn.enable?'blue-bg':'grey-9-bg','light']" @click="sendVerify(bank.bankPhone)">{{verifyBtn.text}}</button>
          </div>
          <div class="verify-btn-box border-top flex flex-justify-between">
            <a href="javascript:;" class="border-right grey-9" @click="showVerify=false">取消</a>
            <a href="javascript:;" class="blue" @click="postVerify">确定</a>
          </div>
        </div>
      </div>
      <div class="flex flex-center" style="padding-bottom:20px;">
        <a href="javascript:;" class="blue" @click="refuse">拒绝该用户的申请</a>
      </div>
    </div>
  </wrap>
</template>
<script>
    const Validate = {
      mobile: function (num) { // 验证手机
        return /^1[3|4|5|7|8][0-9]\d{8}$/.test(num)
      },
      email: function (email) { // 验证邮箱
        /* eslint-disable*/
        return /^([a-zA-Z0-9]+[_|\_|-|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email)
      },
      number: function (num) { // 验证数字
        return /^[0-9]*$/.test(num)
      }
    }
/* eslint-disable*/  
import mixins from '~/mixins'
    import wrap from '~/components/wrap.vue'
    import iSelect from '~/components/i-select.vue'
    import fillProgress from './progress.vue'
    import '~/static/plugin/lrz.js'
    export default {
      mixins: [mixins],
      components: {wrap, iSelect, fillProgress},
      data () {
        return {
          userId: 0,
          nextEnable: false,
          verifyBtn: {
            text: '获取验证码',
            enable: true
          },
          showVerify: false,
          verify: '',
          bank: {
            idCard: '',
            name: '',
            bankId: 0,
            bankNo: '',
            bankPhone: '',
            bankList: [
                        {value: 0, text: '请选择开户行'}
            ]
          }
        }
      },
      computed: {
        phoneEnd () {
          return this.bank.bankPhone.substring(7)
        }
      },
      created () {
        const self = this
        self.userId = self.$route.params.userId
        self.orderId = self.$route.params.orderId
        self.request({act: 'getBank', body: {platUserId: self.userId}}).then(res => {
          if (res.code === 0) {
            self.bank = res.data
          } else {
            /* eslint-disable*/
            layer.open({content: res.userMsg, skin: 'msg', time: 2})
          }
        })
        self.$watch('bank', () => {
          if (self.bank.bankNo && self.bank.bankId && self.bank.bankPhone) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      },
      methods: {
        splitNumber () {
                // this.bank.bankNo=this.bank.bankNo.replace(/[\s]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");//安卓上光标有问题，先注释
        },
        getBankName () {
          let bankName = ''
          this.bank.bankList.forEach(item => {
            if (item.value == this.bank.bankId) {
              bankName = item.text
            }
          })
          return bankName
        },
        sendVerify (phone) {
          const self = this
          if (!self.verifyBtn.enable) {
            return
          }
          if (!Validate.mobile(phone)) {
            layer.open({content: '请填写正确的手机号码', skin: 'msg', time: 2})
            return
          }
          layer.open({type: 2, content: '正在发送验证码...', shadeClose: false})
          self.request({
            act: 'sendVerify',
            body: {telephone: phone, platUserId: self.userId}
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              layer.open({content: '验证码发送成功', skin: 'msg', time: 1.5})
              self.countDown()
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        },
        countDown () {
          const self = this
          let time = 30
          let timer = setInterval(() => {
            time -= 1
            if (time <= 0) {
              clearInterval(timer)
              self.verifyBtn.text = '重新发送'
              self.verifyBtn.enable = true
              return
            }
            self.verifyBtn.text = parseInt(time) + '秒后重发'
            self.verifyBtn.enable = false
          }, 1000)
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          if (!Validate.mobile(self.bank.bankPhone)) {
            layer.open({content: '请填写正确的手机号码', skin: 'msg', time: 2})
            return
          }
          const postData = {
            platUserId: self.userId,
            bankNo: self.bank.bankNo,
            bankId: self.bank.bankId,
            bankName: self.getBankName(),
            bankPhone: self.bank.bankPhone
          }
          layer.open({type: 2, shadeClose: false})
          this.request({
            act: 'saveBank',
            body: postData
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.sendVerify(self.bank.bankPhone)
              self.showVerify = true
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        },
        postVerify () {
          const self = this
          if (!self.verify) {
            layer.open({content: '请填写验证码', skin: 'msg', time: 2})
            return
          }
          layer.open({type: 2, shadeClose: false})
          self.request({
            act: 'postVerify',
            body: {code: self.verify, telephone: self.bank.bankPhone, platUserId: self.userId}
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.showVerify = false
              self.$router.push('/fill/basic/' + self.userId + '-' + self.orderId)
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        },       
        trigger () {
          const self = this
          self.$refs.file.click()
        },
        upload (e) {
          const self = this
          const file = e.target.files[0]
          if (file.length === 0) return
          /* eslint-disable*/
          lrz(file, { width: 1000 }).then(img => {
            let form = new FormData()
            form.append('images', img.file)
            form.append('length', img.fileLen)
            form.append('caId', self.orderId)
            self.request({
              act: 'getBankCard',
              body: form,
              method:'post'
            }).then(res => {
              if (res.code == 0) {
                self.bank.bankNo = res.data
              } else {
                layer.open({content: res.userMsg, skin: 'msg', time: 2})
              }
            })
          })
        },   
      }
    }
</script>
